<template>
  <div>
    <Input
      class="lang-edit-input"
      :value="currentLangValue"
      placeholder
      readonly
      @click.native="showLangEdit"
    ></Input>
    <Icon class="global-icon"></Icon>
  </div>
</template>
<script>
import langEdit from "./LangInput.vue";

export default {
  name: "menuedit",
  props: {
    value: { type: Array, default: () => [] }
  },
  data() {
    return {
      langData: this.arrayToObject(this.value)
    };
  },
  computed: {
    currentLangValue() {
      return this.langData[sessionStorage.LangCode];
    }
  },
  methods: {
    arrayToObject(arr) {
      let obj = {};
      arr.forEach(item => (obj[item.langCode] = item.errorMessage));
      return obj;
    },
    objetToArray(obj) {
      return Object.keys(obj).map(key => ({ langCode: key, errorMessage: obj[key] }));
    },
    showLangEdit() {
      new this.$pageModal(
        langEdit,
        {
          props: {
            oriData: this.langData
          }
        },
        data => {
          if (data) {
            //暂存用户配置的多语言数据
            this.langData = data;
            //当前语言的值为空, 就是无效
            this.$emit("input", this.currentLangValue ? this.objetToArray(this.langData) : null);
          }
        }
      );
    }
  }
  // watch: {},
  // directives: {}
};
</script>
